ShowTable of Contents
概要
XPages Extension Library「Accordion」の利用方法について記述する。
「Accordion」とは
「Accordion」を使うと、アコーディオンメニューと呼ばれる、コンテンツ内を開閉するメニューを実装することが出来る。
「Dojo Accordion Container」及び「Dojo Accordion Pane」との違い
「Accordion」と同様に、Extension LibraryのDojo Layoutには、「Dojo Accordion Container」と「Dojo Accordion Pane」というコントロールが存在する。
それぞれの違いは下記の通り。
|
コントロール名 |
違い |
|
Dojo Accordion Container |
アコーディオンメニューの本体。単体で動作する事は出来ない。コンテンツはDojo Accordion Paneを使って設定する。 |
|
Dojo Accordion Pane |
アコーディオンメニューのコンテンツ部分。単体で動作する事は出来ない。これに他のコントロールを埋め込むことで、多彩なアコーディオンメニューを実現出来る。 |
|
Accordion |
単体でアコーディオンメニューが実現できる。
アコーディオンメニューのコンテンツは決められたものしか設定できない。
|
実現方法
1.「Accordion」の配置
コントロールビューの[Extension Library]にある「Accordion」をドラッグ＆ドロップする。
後述するAccordionのプロパティ一覧に従って、プロパティを設定する。
2.「treeNode」の設定
アコーディオンメニューのコンテンツとなるtreeNodeを設定する（通常は、basicContainerを設定するのが簡単でよい）。
Accordionコントロールのプロパティビューで、「すべてのプロパティ」タブを表示する。
treeNodesの箇所にある[+]をクリックして、子ノードを選択する。
後述する各treeNodeのプロパティ一覧に従って、プロパティを設定する（treeNodeは、表示させたいコンテンツの数だけ追加する必要がある）。
この子ノードは、アコーディオンメニューのタイトル部分を表すもので、コンテンツ自体ではない。
コンテンツを設定するには、treeNodeのプロパティにあるchildrenプロパティにtreeNodeを設定する必要がある（treeNodeの種類によっては、このchildrenプロパティが存在しないものもある）。
XPageを保存する。
ブラウザで動作確認をする。
Accordionのプロパティ一覧
|
カテゴリ |
プロパティ |
説明 |
|
イベント |
onItemClick |
|
|
スタイル |
disableTheme |
|
|
|
style |
Accordionのスタイル |
|
|
styleClass |
Accordionのスタイルを設定したCSSクラス |
|
|
themeId |
|
|
基本 |
binding |
|
|
|
id |
コントロール識別用のID |
|
|
loaded |
|
|
|
rendered |
|
|
|
rendereType |
|
|
|
treeNodes |
アコーディオンメニューとして表示するコンテンツを設定する。設定できるコンテンツは、basicContainerNode、basicLeafNode、beanTreeNode、dominoViewEntriesTreeNode、dominoViewListTreeNode、loginTreeNode、pageTreeNode、repeatTreeNode、separatorTreeNode、userTreeNodeの10種類が存在する。
各コンテンツの詳細は、後述する。
|
treeNodesに設定できる子Nodeのプロパティ一覧
basicContainerNode
|
カテゴリ |
プロパティ |
説明 |
|
|
children |
アコーディオンメニューとして表示するコンテンツを設定する。設定できるコンテンツは、basicContainerNode、 basicLeafNode、beanTreeNode、dominoViewEntriesTreeNode、 dominoViewListTreeNode、loginTreeNode、pageTreeNode、repeatTreeNode、 separatorTreeNode、userTreeNodeの10種類が存在する。
|
|
|
enabled |
コンテンツの有効/無効を決める。falseにした場合、コンテンツのhrefが無効となり、クリックできなくなる。childrenとして設定した場合に有効になる。 |
|
|
href |
コンテンツをクリックした際の移動先のURLを設定する。childrenとして設定した場合に有効になる。 |
|
|
image |
コンテンツの左側にイメージを指定したイメージを配置できる。childrenとして設定した場合に有効になる。 |
|
|
imageAlt |
イメージ（imageに設定したもの）が表示できなかった場合に表示する文字列を設定できる。childrenとして設定した場合に有効になる。 |
|
|
imageHeight |
イメージの高さを設定できる。childrenとして設定した場合に有効になる。 |
|
|
imageWidth |
イメージの幅を設定できる。childrenとして設定した場合に有効になる。 |
|
|
label |
アコーディオンメニューのタイトル、もしくはコンテンツのラベルを設定する。 |
|
|
loaded |
|
|
|
onClick |
コンテンツをクリックしたときのイベントをクライアントサイドのJavaScriptとして記述する。 |
|
|
rendered |
|
|
|
role |
|
|
|
selected |
ページが開いた時にメニューが開いた状態にするかどうかを選択できる。trueにするとメニューが開いた状態になる。複数のメニューでtrueを設定すると、trueになっている一番上のメニューが有効になる。 |
|
|
submitValue |
|
|
|
transparent |
|
|
スタイル |
style |
|
|
|
styleClass |
|
basicLeafNode
|
カテゴリ |
プロパティ |
説明 |
|
|
enabled |
コンテンツの有効/無効を決める。falseにした場合、コンテンツのhrefが無効となり、クリックできなくなる。childrenとして設定した場合に有効になる。 |
|
|
href |
コンテンツをクリックした際の移動先のURLを設定する。childrenとして設定した場合に有効になる。 |
|
|
image |
コンテンツの左側にイメージを指定したイメージを配置できる。childrenとして設定した場合に有効になる。 |
|
|
imageAlt |
イメージ（imageに設定したもの）が表示できなかった場合に表示する文字列を設定できる。childrenとして設定した場合に有効になる。 |
|
|
imageHeight |
イメージの高さを設定できる。childrenとして設定した場合に有効になる。 |
|
|
imageWidth |
イメージの幅を設定できる。childrenとして設定した場合に有効になる。 |
|
|
label |
アコーディオンメニューのタイトル、もしくはコンテンツのラベルを設定する。 |
|
|
loaded |
|
|
|
onClick |
コンテンツをクリックしたときのイベントをクライアントサイドのJavaScriptとして記述する。 |
|
|
rendered |
|
|
|
role |
|
|
|
selected |
ページが開いた時にメニューが開いた状態にするかどうかを選択できる。trueにするとメニューが開いた状態になる。複数のメニューでtrueを設定すると、trueになっている一番上のメニューが有効になる。 |
|
|
style |
|
|
|
styleClass |
|
|
|
submitValue |
|
|
|
title |
|
beanTreeNode
|
カテゴリ |
プロパティ |
説明 |
|
|
loaded |
|
|
|
nodeBean |
|
dominoViewEntriesTreeNode
dominoViewListTreeNode
loginTreeNode
pageTreeNode
repeatTreeNode
separatorTreeNode
userTreeNode
調査環境
Lotus Domino Designer 8.5.3 Upgrade Pack1
Internet Explorer 8
Mozilla Firefox 15.0.1